<template>
  <div id="order-table">
    <el-table :data="orderList" stripe style="width: 100%">
      <el-table-column prop="id" label="订单编号" width="180">
      </el-table-column>
      <el-table-column prop="orderTime" label="下单时间" width="180">
      </el-table-column>
      <el-table-column prop="total" label="总价" width="180"> </el-table-column>
      <el-table-column prop="status" label="状态" width="180">
      </el-table-column>
      <el-table-column prop="customerId" label="顾客id" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <a href="javascript:;" @click="details(scope.row.id)">详情</a>
        </template>
      </el-table-column>
    </el-table>
    <!-- -----------分页-------------- -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import Qs from "querystring";
export default {
  data() {
    return {
      orders: [],
      // 当前点击分页
      currentPage: 1,
      //实际请求分页
      requirePage: 0,
      //订单总数
      total: 0,
      page: 1,
      pageSize: 10,
      orderName: "",
    };
  },
  methods: {
    sendItem(name) {
      this.orderName = name;
      if (name === "所有订单") {
        var data = {
          page: this.requirePage,
          pageSize: this.pageSize,
        };
      } else {
        var data = {
          page: this.requirePage,
          pageSize: this.pageSize,
          status: name,
        };
      }
      this.$axios
        .post("/order/queryPage", Qs.stringify(data))
        .then((response) => {
          this.orders = response.data.data.list;
          this.total = response.data.data.total;
        });
    },
    details(id) {
      //编程式路由传值
      this.$router.push({
        path: "/orderDetails/index",
        query: {
          id: id,
        },
      });
    },
    // 分页函数
    handleCurrentChange(val) {
      this.requirePage = val - 1;
      this.sendItem(this.orderName);
    },
  },
  computed: {
    orderList() {
      this.orders.forEach((item) => {
        item.orderTime = new Date(item.orderTime).toLocaleString();
      });
      return this.orders;
    },
  },
};
</script>

<style lang="scss" scoped>
#order-table a:hover {
  color: #409eff;
}
</style>>
